<template>
  <view class="content">
    <uni-search-bar v-model="searchValue" radius="5" placeholder="输入昵称/ID搜索" @confirm="refresh" clearButton="auto" cancelButton="none" />

    <uni-list :border="false">
      <uni-list-item class="list1">
        <!-- 自定义 body -->
        <template v-slot:body>
          <view class="list">
            <view class="flex1">头像</view>
            <view class="wid">投放数量</view>
            <view class="wid">未认领</view>
          </view>
        </template>
      </uni-list-item>
    </uni-list>
    <view class="list2">
      <scroll-view :style="{ height: `${heightAuto}px` }" v-if="dogList && dogList.length > 0" class="hei-full" @scrolltolower="lower" scroll-y="true">
        <uni-list>
          <uni-list-item v-for="item in dogList" :key="item.user?.uid">
            <!-- 自定义 body -->
            <template v-slot:body>
              <view class="list">
                <view class="flex1">
                  <image class="slot-image" :src="item.user?.avatar || '/static/images/default.jpg'" mode="aspectFill"></image>
                  <view class="info">
                    <view>{{ item.user?.nickname || maskPhoneNumberPartially(item.user?.mobile) }}</view>
                    <view>ID:{{ item.user?.uid }}</view>
                    <view>{{ item.lanuch_time }}</view>
                  </view>
                </view>
                <view class="wid">{{ item.lanuch_num }}</view>
                <view class="wid">{{ item.noAdopt_num }}</view>
              </view>
            </template>
          </uni-list-item>
        </uni-list>
      </scroll-view>

      <statusTips v-else></statusTips>
    </view>
    <view class="footer">
      <button @click="goto('/pages/dog/myl/index')" size="mini">去认领</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getAdoptPondInfo } from '@/api/bgame';
import statusTips from '@/components/statusTips/statusTips.vue';
import { useUserStoreHook } from '@/store/user';
import Toast from '@/utils/Toast';
const heightAuto = ref(0);
const searchValue = ref('');
const dogList = ref([]);
const page = ref(1);
const pagesize = ref(10);
const total = ref(0);
const triggered = ref(false);
const showLoadDoneTips = ref(true);
const isChangeTime = ref(false);
const getList = async () => {
  if (page.value == 1) {
    showLoadDoneTips.value = true;
  }
  uni.showLoading({
    title: '获取信息中...',
    mask: true,
  });
  let response: any = await getAdoptPondInfo({
    search: searchValue.value,
    page: page.value,
  });
  console.log('response.result', response.result);
  uni.hideLoading();
  if (response.result == 1) {
    let list = response.data.data || [];
    total.value = response.data.total || 0;
    let sList = dogList.value.concat(list);
    dogList.value = sList;
  } else {
    Toast.message(response.retMsg || '查询失败');
  }
  triggered.value = false;
};
const maskPhoneNumberPartially = (phoneNumber: any) => {
  // 检查输入是否为11位手机号
  if (!/^\d{11}$/.test(phoneNumber)) {
    return '-';
  }

  // 使用字符串的slice方法提取前3位、替换中间4位为'*'，并连接后4位
  return phoneNumber.slice(0, 3) + '****' + phoneNumber.slice(7);
};
const goto = (path: any) => {
  uni.navigateTo({
    url: path,
  });
};

const onRefresh = (type = 0) => {
  if (type == 1) {
    isChangeTime.value = true;
  }
  triggered.value = true;
  refresh();
};
const lower = () => {
  console.log('lower');
  //判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
  if (page.value * pagesize.value >= total.value) {
    if (showLoadDoneTips.value) {
      showLoadDoneTips.value = false;
      Toast.success('数据加载完毕');
    }
    return;
  }
  //页码+1,调用获取数据的方法获取第二页数据
  page.value++;
  //此处调用自己获取数据列表的方法
  getList();
};
const refresh = () => {
  page.value = 1;
  dogList.value = [];
  getList();
};

// 在页面的onLoad方法中调用
onLoad(async () => {
  await useUserStoreHook().getSign();
  refresh();
  // const that = this;
  uni.getSystemInfo({
    success: function (res) {
      // 获取状态栏高度
      const statusBarHeight = res.statusBarHeight;
      // 获取窗口高度
      const windowHeight = res.windowHeight;
      // 计算可视区域高度（这里假设没有自定义导航栏或已经减去）
      const visibleHeight = windowHeight - statusBarHeight;
      // 将可视区域高度保存到页面的data中或进行其他处理
      console.log('visibleHeight', visibleHeight - 115);
      heightAuto.value = visibleHeight - 115;
      // that.setData({
      //   visibleHeight: visibleHeight
      // });
    },
  });
});
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: calc(100vh - 44px);
  padding: 8rpx;

  .footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    background-color: white;
    text-align: center;
    padding: 10px;

    button {
      width: 300px;
      background-color: green;
      color: white;
      height: 35px;
      line-height: 35px;
    }
  }
}

.list {
  width: 100%;
  display: flex;
  font-size: 0.9rem;

  .flex1 {
    flex: 1;
    width: 0;
  }

  .wid {
    width: 140rpx;
    text-align: center;
  }
}

.list1 {
  background-color: #f5f5f5 !important;
}

.list2 {
  overflow-y: auto;

  .flex1 {
    display: flex;
    align-items: center;

    .slot-image {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }

    .info {
      font-size: 12px;
      color: gray;
      margin-left: 4px;
      display: flex;
      flex-direction: column;
    }
  }
}
</style>
